<template>
  <div class="home">
    <header-logo />
    <div>
      <van-tabs v-model:active="tabActive" class="home-tab-list" ref="tab_bar">
        <van-tab
          v-for="(item, index) in tabList"
          :key="index"
          :name="item"
          :title="i18n.$t(item)"
          class="tab-item"
        ></van-tab>
      </van-tabs>
      <van-pull-refresh v-model="Dwnloading" @refresh="onRefresh">
        <div class="data-list" ref="data_list">
          <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="-我是有底线的-"
            @load="onLoad"
          >
            <div class="home-list">
              <div v-for="(item, index) in topList" :key="item.uniquekey">
                <div class="top-ske">
                  <van-skeleton title :row="3" :loading="skeLoading">
                    <div
                      v-if="item.thumbnail_pic_s03"
                      class="home-item-1"
                      @click="goToDetail(item.uniquekey)"
                    >
                      <p>{{ item.title }}</p>
                      <div class="flex-row">
                        <img :src="item.thumbnail_pic_s" alt="" />
                        <img v-if="item.thumbnail_pic_s02" :src="item.thumbnail_pic_s02" alt="" />
                        <img v-if="item.thumbnail_pic_s03" :src="item.thumbnail_pic_s03" alt="" />
                      </div>
                      <p class="flex-row">
                        <span class="tab-bg-1">{{ item.author_name }}</span>
                        <!-- <span class="tab-bg-2">{{ item.category }}</span> -->
                      </p>
                    </div>
                  </van-skeleton>
                </div>

                <van-skeleton title :row="2" :loading="skeLoading">
                  <div
                    class="flex home-item-2"
                    @click="goToDetail(item.uniquekey)"
                    v-if="
                      item.thumbnail_pic_s && (!item.thumbnail_pic_s03 || !item.thumbnail_pic_s02)
                    "
                  >
                    <img :src="item.thumbnail_pic_s" alt="" />
                    <p>
                      <span class="home-item-title">{{ item.title }}</span>
                      <span class="tab-bg-1">{{ item.author_name }}</span>
                    </p>
                  </div>
                </van-skeleton>
                <van-divider v-if="index + 1 != topList.length" hairline />
              </div>
            </div>
          </van-list>
          <div class="no-msg" v-if="noDataActive">
            <van-icon name="description" />
            <p>数据已用光，请明天再试~</p>
          </div>
        </div>
      </van-pull-refresh>
    </div>
    <m-footer :route="childRoute" />
  </div>
</template>

<script lang="ts">
  import { defineComponent, reactive, toRefs, watch, ref } from 'vue'
  import { useRouter } from 'vue-router'
  import { HeaderLogo, MFooter } from 'comps'

  import { useStore } from 'vuex'

  import commonData from '@/data'
  import { useI18n } from '@/i18nPlugin'

  import { getNewsList } from '@/serve/api'

  export default defineComponent({
    components: {
      HeaderLogo,
      MFooter
    },
    setup() {
      const i18n = useI18n()
      const router = useRouter()
      const store = useStore() // 使用useStore方法
      const loading = ref(false)
      const finished = ref(false)
      const data = reactive({
        childRoute: 'home',
        tabActive: 'top',
        tabList: commonData.tabList,
        list: [],
        Dwnloading: false, //下拉刷新状态
        skeLoading: true, //骨架站位图状态
        pageNum: 0,
        topList: [],
        noDataActive: false
      })
      watch(
        () => data.tabActive,
        (oldValue: string) => {
          data.pageNum = 0
          let type = ''
          commonData.itemTypes.forEach((item: any) => {
            if (item.barType == oldValue) {
              type = item.httpType
            }
          })
          data.list = []
          data.Dwnloading = false
          finished.value = false
          getVuexNewsListFunc(type)
        }
      )
      const getVuexNewsListFunc = (type: string) => {
        data.pageNum++
        let vuex_news_list = store.state.newsList
        let isHttp = true
        // console.log(data.pageNum)
        if (data.pageNum != 1) {
          data.skeLoading = false
        }
        if (vuex_news_list.length > 0) {
          vuex_news_list.forEach((item: any) => {
            if (item.type == type && data.pageNum == item.pageNum) {
              isHttp = false
              if (data.pageNum == 1) {
                data.topList = item.list
                data.skeLoading = false
                console.log('取缓存1条')
              } else {
                data.topList = data.topList.concat(item.list)
              }
            }
          })
        }
        if (isHttp) {
          console.log('获取新数据', data.pageNum)
          if (data.pageNum <= 3) {
            getNewsListFunc(type)
          } else {
            finished.value = true
          }
        } else {
          console.log('取缓存')
          getVuexDataSend()
        }
      }
      const getVuexDataSend = (/*调取本地数据之后处理下拉组件*/) => {
        // Toast('一大波精彩来袭~')
        loading.value = false
        if (data.topList && data.topList.length >= 30) {
          finished.value = true
        }
      }
      const getNewsListFunc = (type: string) => {
        let req = {
          type,
          page: data.pageNum,
          page_size: 10
        }
        getNewsList(req).then((res: any) => {
          // Toast('来咯来咯😃')
          if (res.data.length == 10) {
            data.noDataActive = false
            if (data.pageNum == 1) {
              data.topList = res.data
            } else {
              data.topList = data.topList.concat(data.topList)
            }

            loading.value = false
            let vuex_news_obj = {
              type,
              list: res.data,
              pageNum: data.pageNum
            }
            store.commit('SET_NEWS_LIST', vuex_news_obj)
            if (data.topList.length >= 30) {
              finished.value = true
            }
            data.skeLoading = false //隐藏骨架
            if (data.Dwnloading) {
              //下拉刷新回弹
              data.Dwnloading = false
            }
          } else {
            if (data.pageNum == 1) {
              data.topList = []
              data.noDataActive = true
            } else {
              // Toast(res.data + '😟')
              finished.value = false
            }
          }
        })
      }
      const onRefresh = () => {
        console.log('下拉刷新')
        setTimeout(() => {
          data.pageNum = 0
          data.Dwnloading = false
          finished.value = false
          let type = ''
          let arr = commonData.itemTypes
          arr.forEach((item: any) => {
            if (item.barType == data.tabActive) {
              type = item.httpType
            }
          })
          getVuexNewsListFunc(type)
        }, 1000)
      }
      const onLoad = () => {
        console.log('上啦加载')
        setTimeout(() => {
          if (data.Dwnloading) {
            data.topList = []
            data.Dwnloading = false
          }
          let type = ''
          let arr = commonData.itemTypes
          arr.forEach((item: any) => {
            if (item.barType == data.tabActive) {
              type = item.httpType
            }
          })
          getVuexNewsListFunc(type)
        }, 1000)
      }
      return {
        ...toRefs(data),
        i18n,
        finished,
        loading,
        onRefresh,
        onLoad,
        getVuexNewsListFunc,
        getNewsListFunc,
        getVuexDataSend
      }
    }
  })
</script>

<style lang="scss" scoped>
  .home {
    font-size: 40px;
    padding-top: 130px;
    padding-bottom: 100px;
    // color: $theme-active;
    .home-tab-list {
      position: fixed;
      top: 80px;
      height: 35px;
      z-index: 1000;
      width: 100%;
      :deep(.van-tab__text) {
        font-size: 24px;
      }
      // :deep(.van-tab--active) span {
      //   color: $theme-active;
      // }
    }
    :deep(.van-swipe-item) {
      padding: 15px;
    }
    .img-item {
      width: 100%;
      border-radius: 5px;
    }
    .home-list {
      width: 95%;
      margin: 0 auto;
      p {
        font-size: 24px;
        margin: 20px 0 10px 0;
      }
      .home-item-1 {
        div {
          img {
            width: 32.5%;
            height: 120px;
          }
        }
        .tab-bg-1 {
          font-size: 20px;
          color: #ccc;
        }
      }
      .home-item-2 {
        position: relative;
        img {
          width: 32.5%;
        }
        p {
          margin-left: 10px;
          .home-item-title {
            position: absolute;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            top: 0;
            left: 34%;
            width: 66%;
            font-size: 24px;
          }
          .tab-bg-1 {
            position: absolute;
            bottom: 0;
            right: 0;
            color: #ccc;
            font-size: 12px;
          }
          .tab-bg-2 {
            // background: $theme-active;
            color: #fff;
            font-size: 24px;
            padding: 3px 10px;
            text-align: center;
            height: 20px;
            line-height: 20px;
            border-radius: 4px;
            margin-left: 5px;
          }
        }
      }
      .top-ske {
        margin-bottom: 20px;
        :deep(.van-skeleton__title) {
          width: 100%;
        }
        :deep(.van-skeleton__row:nth-child(2)),
        :deep(.van-skeleton__row:nth-child(3)),
        :deep(.van-skeleton__row:nth-child(4)) {
          width: 29% !important;
          height: 100px;
          float: left;
          margin: 0;
          position: relative;
          top: 10px;
          left: 0;
          // padding: 0 5px;
        }
        :deep(.van-skeleton__row:nth-child(3)) {
          margin: 0 6.3%;
        }
      }
    }
    .no-msg {
      padding-top: 50px;
      min-height: 500px;
      .van-icon {
        font-size: 100px;
        color: #ccc;
      }
      .van-icon,
      .van-icon:before {
        display: block;
        text-align: center;
      }
      p {
        color: #ccc;
        font-size: 24px;
        margin-top: 20px;
        text-align: center;
      }
    }
  }
</style>
